<template>
  <div>
    <el-table :data="tableData.filter(data => !search || data.order_id.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
      <el-table-column label="订单号" prop="order_id" width="200px" />
      <el-table-column label="用户id" prop="uId" width="100px" />
      <el-table-column label="商品名称" prop="goods_name" width="350px" />
      <el-table-column label="价格" prop="goods_price" width="100px" />
      <el-table-column label="数量" prop="goods_num" width="100px" />
      <!-- <el-table-column label="图片" preview-teleported prop=" imgUrl" /> -->
      <el-table-column label="图片" width="80">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-image style="width: 60px;height: 60px;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]"
              hide-on-click-modal="true" preview-teleported="true">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="输入订单号..." />
        </template>
        <template #default="scope">
          <el-button size="small" @click="onchange(scope)">确定退货</el-button>
          <el-button size="small" type="danger" @click="Deleteorder(scope.$index, scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {

      tableData: [],

      search: ''
    }
  },
  mounted() {
    axios.get("/api/getOrderlist2", {
    }).then(res => {
      // console.log(res)
      this.tableData = res.data
      //  console.log(this.tableData)
      //  console.log(this.tableData.price)

    })
  },
  methods: {
    //商品发货
    onchange(scope) {
      let oid = scope.row.order_id
      console.log(oid)
      axios.get("/api/updata_status2", {
        params: {
          oid
        }
      }).then(res => {
        console.log(res)
      })
    },
    //删除订单
    Deleteorder(index,scope){
      let oid = scope.row.order_id
       axios.get("/api/delete_order1",{
        params:{
          oid
        }
       }).then(res=>{
        this.tableData.splice(index,1)
       })
    }
  }
}
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>